<template>
    <div>
        <el-select v-model="search.days">
            <el-option label="5天" :value="5"></el-option>
            <el-option label="15天" :value="15"></el-option>
            <el-option label="30天" :value="30"></el-option>
        </el-select>

        <el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">查询</el-button>

        <el-row :gutter="10">
            <el-col :span="8" v-for="(item, index) in echarts" class="mt-20" :key="index">
                <el-card shadow="always">
                    <chart-line :options="item.options" :zoom="false" :seriesShowSymbol="search.days <= 5" :title="item.name" style="width: 100%; height: 300px;"></chart-line>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import ChartLine from "~/components/ChartLine"

export default {
    props: ['day',],
    components: {
        ChartLine,
    },
    data() {
        return {
            search: {
                days: 5,
            },
            loading: false,
            tableData: {},
            echarts: [],
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    watch: {

    },
    methods: {
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                day: this.day,
            });
            this.$store.dispatch('spreadData/SceneConsumeBulletChart', filter).then(({data}) => {
                this.tableData = data.data;
                this.echarts = [];
                this.tableData.sort((a, b) => {
                    return a.id > b.id ? 1 : -1;
                }).map(v => {
                    this.echarts.push({
                        name: v.name,
                        options: this.getOptions(v.data),
                    })
                })
            }).finally(() => {
                this.loading = false;
            });
        },
        getOptions(data) {
            return {
                legend: {
                    data: ['流水']
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '日期{b0}<br>{a0}: {c0} 亿'
                },
                yAxis: {
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} 亿'
                    },
                    min: (value) => {
                        return Math.floor(value.min / 100) * 100;
                    },
                    max: (value) => {
                        return Math.ceil(value.max / 100) * 100;
                    }
                },
                xAxis: {
                    data: Object.keys(data).map(v => {
                        return v.substr(5)
                    })
                },
                series: [
                    Object.values(data).map(v => (v/1e8).toFixed(2)),
                ],
                seriesFormatter (point) {
                    return point.data + "亿";
                }
            };
        },
    },
    created() {

    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

